<template>
	<view class="pageContent">
		<view class="box">
			<view class="item">
				<view class="left">头像</view>
				<view class="right">
					<button class="avatarBox" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					  <image class="logo"  :src="form.avatar ? form.avatar : '/static/avatar.png'" mode="aspectFill"></image>
					</button>  
					<u-icon name="arrow-right" color="#b3b3b3" size="15"></u-icon>
				</view>
			</view>
			<view class="item"> 
				<view class="left">昵称</view>
				<view class="right"> 
					<input class="nickname"  type="nickname"  placeholder="请输入昵称" @change='changenickname'  v-model="form.nickname"/>
					<u-icon name="arrow-right" color="#b3b3b3" size="15"></u-icon>
				</view>
			</view>
			 <view class="item">
				<view class="left">二维码</view>
				<view class="right" @click="show = true">
				<image src="/static/codes.png" mode="" class="code"></image>
				<u-icon name="arrow-right" color="#b3b3b3" size="15"></u-icon></view>
			</view> 
		</view>
		 
		<button class="button" @click="handleSumit">保存</button>
		
		 <u-overlay :show="show">
			<view class="vipCodeBox">
				<view class="sbox">
					<image src="/static/col.png" class="col" mode="" @click="show = false"></image>
					<image :src="userInfo.shardQrCode" class="code" mode=""></image>
				</view>
			</view>
		 </u-overlay>
		 
	</view>
</template>

<script>
	export default{
		data(){
			return{ 
				show: false,
				form:{ 
					nickname:'',  
					avatar:'', 
				}
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo 
			}
		},
		onLoad() {
			 this.form.avatar = this.userInfo.icon
			 this.form.nickname = this.userInfo.nickname
		}, 
		
		methods:{
			onChooseAvatar(e) {
				this.uploadImage(e.detail.avatarUrl) 
			},
			
			uploadImage(file){ 
				uni.uploadFile({
					url:'https://le.bjxlu.com/minio/upload',
					filePath: file, 
					name: 'file', 
					success: (uploadFileRes) => { 
						const data = JSON.parse(uploadFileRes.data)
						
						if(data.code == 200){ 
							this.form.avatar = data.data.url 
						}
					},
					fail: (e) => {
						console.log('eee',e)
					}
				});  
			},
			 
			changenickname(e) {
				this.form.nickname = e.detail.value
			},  
			
			handleSumit(){  
				this.$http({
					url:"/sso/updateInfo",
					data:{  
						nickname:this.form.nickname,  
						icon:this.form.avatar,  
					}
				}).then(()=>{
					uni.showToast({
						title:"提交成功",
						icon:"none"
					})
					 this.$store.dispatch('getUserInfo'); 
					 setTimeout(()=>{
						 uni.navigateBack()
					 },1000)
				})
			},  
		}
	}
</script>


<style lang="scss" scoped>
	.button{
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 100rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		background: #020202;
		color: #fff;
		padding: 10rpx 0;
	}
	.avatarBox{
		    padding: 0;
		    margin-right: 20rpx;
		    height: 72rpx;
		    border: none;
		    border-radius: 50%;
			&::after{
				border:none
			}
	}
 
	.box{
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		.item{
			display: flex;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #eee;
			justify-content: space-between;
			.left{
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
			.right{
				display: flex;
				align-items: center;
				input{
					text-align: right;
					margin-right: 20rpx;
					font-size: 28rpx;
				}
				text{
					margin-right: 20rpx;
					font-size: 28rpx;
				}
				.logo{
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
				.code{
					width: 40rpx;
					margin-right: 20rpx;
					height: 40rpx; 
				}
			}
		}
	}
</style>